<template>
  <div class="container">
    <router-view></router-view>
    <footer class="footer">
      <ul>
        <router-link to="/home" tag="li">
          <span class="iconfont icon-shouye"></span>
          <p>首页</p>
        </router-link>
        <router-link to="/kind" tag="li">
          <span class="iconfont icon-fenlei"></span>
          <p>分类</p>
        </router-link>
        <router-link to="/cart" tag="li">
          <span class="iconfont icon-gouwucheman"></span>
          <p>购物车</p>
        </router-link>
        <router-link to="/user" tag="li">
          <span class="iconfont icon-shouye1"></span>
          <p>我的</p>
        </router-link>
      </ul>
    </footer>
    <div class="tip">请将屏幕竖向浏览</div>
  </div>
</template>

<style lang="stylus">
*
  padding 0
  margin 0
  list-style none
@font-face {
  font-family: "iconfont"; /* Project id 2868809 */
  src: url('https://at.alicdn.com/t/font_2868809_53a45mmpmnl.woff2?t=1634214971678') format('woff2'),
    url('https://at.alicdn.com/t/font_2868809_53a45mmpmnl.woff?t=1634214971678') format('woff'),
    url('https://at.alicdn.com/t/font_2868809_53a45mmpmnl.ttf?t=1634214971678') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-gouwucheman:before {
  content: "\e600";
}

.icon-shouye:before {
  content: "\e6cb";
}

.icon-shouye1:before {
  content: "\e615";
}

.icon-fenlei:before {
  content: "\e71b";
}
html
  font-size 26.666667vw
@media all and (min-width: 996px)
  html
    font-size 100px
body
  font-size 12px
html, body, .container
  width 100%
  height 100%
.container
  max-width 960px
  margin 0 auto
  display flex
  flex-direction column
  .box
    flex 1
    display flex
    flex-direction column
    .header
      height 0.44rem
      background-color: #ff6666
    .content
      flex 1
      overflow auto
  .footer
    height 0.5rem
    background-color: #efefef
    ul
      width 100%
      height 100%
      display flex
      li
        flex 1
        height 100%
        display flex
        flex-direction column
        justify-content center
        align-items center
        &.router-link-active
          color #f66
        span
          font-size 0.24rem
        p
          font-size 12px
  .tip
    position fixed
    top 0
    right 0
    bottom 0
    left 0
    background-color: rgba(0, 0, 0, 0.5)
    display none
    justify-content center
    align-items center
    font-size 30px
    color #ffffff
@media all and (orientation: landscape)
  .container
    .tip
      display flex

</style>
